<!-- 学社 - 课程 - 完成情况 -->
<template>
  <view class="bg-#f8f8f8 min-h-screen">
    <!-- 背景图 -->
    <view class='relative h-536'>
      <view class="w-full h-536 absolute left-0 top-0 z-1">
        <image class="w-full h-full"
          :src="state.fromType == 'course' ? '/package_society/static/images/banner_course.png' : '/package_society/static/images/banner_exam.png'" />
      </view>
      <view class="w-full h-536 absolute left-0 top-0 z-2 flex flex-col">
        <view class="flex items-center pl-4" :style="{ height: backIconHeight + 'px', marginTop: backIconTop + 'px' }">
          <image class="z-2 w-18 h-34" src="/static/images/user/ic_back.png" @click="onBack" />
        </view>
        <view class="pt-3 pl-3 c-white text-60 font-bold w-460 text-lines-2 mb-2">{{ state.fromType == 'course' ?
          state.detailData?.class_name : state.detailData?.exam_name }}</view>
        <view v-if="state.fromType == 'course'" class="pl-3 pt-2 flex items-center c-white text-24">
          <view>{{ state.detailData?.study_num }}人观看</view>
          <view class="bg-#fff w-2 h-28 mx-2" />
          <view>共{{ state.detailData?.chapters_num }}课时</view>
          <view class="bg-#fff w-2 h-28 mx-2" />
          <view>{{ state.detailData?.finish_num }}人已看完</view>
        </view>
        <view v-if="state.fromType == 'exam'" class="pl-3 pt-2 flex items-center c-white text-24">
          <view>{{ state.detailData?.join_num }}人参加</view>
          <view class="bg-#fff w-2 h-28 mx-2" />
          <view>考试次数 {{ state.detailData?.exam_num }}</view>
          <view class="bg-#fff w-2 h-28 mx-2" />
          <view>{{ state.detailData?.pass_num }}人合格</view>
        </view>
      </view>
    </view>
    <view class="content-card relative z-3">
      <view class="flex c-#999 text-32 mb-3">
        <view class="flex-1 flex justify-center">名字</view>
        <view class="flex-1 flex justify-center">{{ state.fromType == 'course' ? '学习课时' : '答题次数' }}</view>
        <view class="flex-1 flex justify-center">{{ state.fromType == 'course' ? '进度' : '最高分' }}</view>
        <view v-if="state.fromType == 'course'" class="flex-1 flex justify-center">心得</view>
      </view>
      <view v-for="(item, index) in state.detailData?.log_list" :key="index" class="flex items-center my-2">
        <view class="flex-1 flex items-center justify-center text-single">
          <u-image class="flex-shrink-0" width="60" height="60" shape="circle" :src="item.user?.avatar"
            @click="toHomePage(item.user_id)"></u-image>
          <view class="flex-1 ml-2 c-#666 text-32 text-single" @click="toHomePage(item.user_id)">{{ item.user?.nickname }}
          </view>
        </view>
        <view class="flex-1 flex justify-center">{{ state.fromType == 'course' ? item.chapter_num : item.exam_num }}{{
          state.fromType == 'course' ? '课时' : '次' }}</view>
        <view v-if="state.fromType == 'course'" class="flex-1 flex justify-center"
          :class="[item.progress != 100 ? 'c-#FF513A' : '']">{{ item.progress }}%</view>
        <view v-if="state.fromType == 'exam'" class="flex-1 flex justify-center items-center">
          <view class="relative w-140 h-140 flex justify-center"
            @click="navigate(`/package_society/pages/exam/detail?exam_id=${state.detailData?.exam_id}&club_id=${state.detailData?.club_id}&user_id=${item.user_id}`)">
            <view class="absolute z-2 text-28 top-28" :class="`c-level${item.level}`">{{ item.score }}分</view>
            <image class="w-full h-full absolute left-0 top-0"
              :src="`/package_society/static/images/img_status_level${item.level}.png`"></image>
          </view>
        </view>
        <view v-if="state.fromType == 'course'" class="flex-1 flex justify-center">
          <view v-if="item.study_note" class="btn-view"
            @click="navigate(`/package_square/pages/course/summary/index?fromType=society&id=${state.detailData?.class_id}&user_id=${item.user_id}`)">查看
          </view>
          <view v-else class="c-#D4D4D4 text-28">暂无</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { navigate } from "@/common/util/uni";
import { toHomePage } from "@/common/util/util";
import { getClassCompletion, getExaminationCompletion } from '@/common/http/module/society.js'

const state = reactive({
  fromType: '', // course-课程 exam-考试
  club_id: '', // 学社id
  detailData: null
})

const backIconTop = uni.getMenuButtonBoundingClientRect().top
const backIconHeight = uni.getMenuButtonBoundingClientRect().height

// 返回
function onBack () {
  uni.navigateBack()
}

function loadData (id) {
  const requestMethod = state.fromType == 'course' ? getClassCompletion : getExaminationCompletion
  requestMethod(state.club_id, id).then(res => {
    state.detailData = res.data
  })
}

onLoad(options => {
  state.fromType = options.fromType
  state.club_id = options.club_id
  loadData(options.id)
})
</script>

<style lang="scss" scoped>
.content-card {
  margin: -100rpx 32rpx 0;
  padding: 24rpx;
  border-radius: 12rpx 12rpx 0px 0px;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
  min-height: calc(100vh - 436rpx);
}

.c-level1 {
  color: #FF513A;
}

.c-level2 {
  color: #3FB352;
}

.c-level3 {
  color: #F4AF22;
}

.btn-view {
  padding: 8rpx 18rpx;
  border: 2rpx solid #F4AF22;
  color: #F4AF22;
  font-size: 28rpx;
  border-radius: 8rpx;
}</style>
